<template>
  <a-spin :spinning="loading">
    <div class="person_tab_div">
      <div v-if="tabLists.includes('applicant') && Object.keys(applicationMap).length != 0" class="">
        <div class="tag_div" style="margin: 10px 10px">
          <span style="font-weight: bold;">申请人：</span>
          <div v-for="(item, key, index) in applicationMap" :key="index" class="tag_div">
            <div v-for="(applicant, personKey) in applicationMap[key]" :key="personKey">
              <a-tag color="#0072c6" :class="applicantKey == applicant.id ? 'tag_content_select_div' : 'tag_content_noselect_div'" @click="editApplicantPerson(applicant, key)"> {{ applicant.name }}</a-tag>
            </div>
          </div>
        </div>
        <ApplicantPersonAddView ref="applicantPersonAddViewRef" :applyid="applyid" @requery="getApplicantlist"></ApplicantPersonAddView>
      </div>
      <div v-if="tabLists.includes('agent') && Object.keys(agentMap).length != 0" class="">
        <div class="tag_div" style="margin: 10px 10px">
          <span style="font-weight: bold;">委托代理人：</span>
          <div v-for="(item, key, index) in agentMap" :key="index" class="tag_div">
            <div v-for="(agent, personKey) in agentMap[key]" :key="personKey">
              <a-tag color="#0072c6" :class="agentKey == agent.id ? 'tag_content_select_div' : 'tag_content_noselect_div'" @click="editAgentPerson(agent, key)"> {{ agent.name }}</a-tag>
            </div>
          </div>
        </div>
        <AgentPersonAddView ref="agentPersonAddViewRef" :applyid="applyid" @requery="getAgentlist"></AgentPersonAddView>
      </div>
    </div>
    <!-- <MultiUploadBasic ref="multiUploadBasic" @importFileFun="importFileFun"></MultiUploadBasic> -->
  </a-spin>
</template>

<script>
import { Tp_applicantList, Tp_applicantValue } from '@/enumeration/Tp_applicant'
import { Tp_agentList, Tp_agentValue } from '@/enumeration/Tp_agent'
import { Tp_cardList } from '@/enumeration/Tp_card'
import { kkfilePreview } from '@/utils/util.js'
import { getApplicantWithGroup, deleteApplicantFile, updateApplicantAttachId } from '@/api/accept/apl_applicant'
import { getAgentWithGroup, deleteAgentFile, updateAgentAttachId } from '@/api/accept/apl_agent'
import { YesNoValue } from '@/enumeration/YesNo'
import { downloadFileWithUrl } from '@/utils/util'
import { minioUploadMore } from '@/api/base/file'
import { FILETYPE, FILESIZE } from '@/store/mutation-types'
export default {
  name: 'PersonMaterials',
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    },
    tabLists: {
      // 渲染的tabs
      type: Array,
      required: true
    }
  },
  data () {
    return {
      key: '1',
      Tp_applicant: Tp_applicantList,
      Tp_applicantValue: Tp_applicantValue,
      Tp_card: Tp_cardList,
      Tp_agentValue: Tp_agentValue,
      Tp_agent: Tp_agentList,
      YesNoValue: YesNoValue,
      applicantPersonColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '名称',
          align: 'center',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系地址',
          key: 'addr',
          dataIndex: 'addr',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          align: 'center',
          width: '150px'
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          align: 'center',
          width: '100px'
        },
        {
          title: '是否代表人',
          key: 'isrepr',
          dataIndex: 'isrepr',
          width: '150px',
          align: 'center',
          scopedSlots: { customRender: 'isreprSlot' }
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          align: 'center',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],

      applicantUnitColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '名称',
          align: 'left',
          width: '100px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '信用代码',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '100px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系地址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          width: '100px'
        },
        {
          title: '法人/代表人',
          key: 'manager',
          dataIndex: 'manager',
          width: '120px'
        },
        {
          title: '工作',
          key: 'job',
          dataIndex: 'job',
          width: '100px'
        },
        {
          title: '身份证明书',
          dataIndex: 'doccardList',
          key: 'doccardList',
          width: '350px',
          scopedSlots: { customRender: 'doccardSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 律师代表
      agentLawColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '100px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '工作单位',
          key: 'unit',
          dataIndex: 'unit',
          width: '100px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '身份证明书',
          dataIndex: 'doccardList',
          key: 'doccardList',
          width: '350px',
          scopedSlots: { customRender: 'doccardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 法定代表
      agentUnitColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],

      agentOtherColumns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '80px',
          fixed: 'left',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '类型',
          align: 'left',
          width: '150px',
          key: 'type',
          dataIndex: 'type',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '名称',
          align: 'left',
          width: '80px',
          key: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '证件类型',
          key: 'cardtype',
          dataIndex: 'cardtype',
          width: '100px',
          scopedSlots: { customRender: 'cardtypeSlot' }
        },
        {
          title: '证件号',
          key: 'cardno',
          dataIndex: 'cardno',
          width: '200px',
          scopedSlots: { customRender: 'cardnoSlot' }
        },
        {
          title: '联系号码',
          key: 'tel',
          dataIndex: 'tel',
          width: '150px'
        },
        {
          title: '工作单位',
          key: 'unit',
          dataIndex: 'unit',
          width: '100px'
        },
        {
          title: '住址',
          key: 'addr',
          dataIndex: 'addr',
          width: '150px',
          scopedSlots: { customRender: 'addrSlot' }
        },
        {
          title: '邮政编码',
          key: 'postcode',
          dataIndex: 'postcode',
          width: '100px'
        },
        {
          title: '身份证明',
          dataIndex: 'filecardList',
          key: 'filecardList',
          width: '350px',
          scopedSlots: { customRender: 'filecardSlot' }
        },
        {
          title: '委托书',
          dataIndex: 'fileentrustList',
          key: 'fileentrustList',
          width: '350px',
          scopedSlots: { customRender: 'fileentrustSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '200px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      applicationMap: {}, // 申请人材料
      agentMap: {}, // 委托代理人材料
      loading: false,
      activeKey: [],
      activeAgentKey: [],

      selectData: {}, // 点击按钮选择的行数据
      operateType: undefined, // 操作类型 0：身份证明 1:身份证明书，2：第三人证明材料
      operateKey: undefined,
      acceptFileType: FILETYPE,

      applicantKey: undefined,
      agentKey: undefined
    }
  },
  components: {
    MultiUploadBasic: () => import('@/views/materials/multiUpload/MultiUploadBasic.vue'),
    AgentPersonAddView: () => import('@/views/materials/AgentPersonAddView.vue'),
    ApplicantPersonAddView: () => import('@/views/materials/ApplicantPersonAddView.vue')
  },
  async created () {
  },
  async mounted () {
    this.$nextTick(async () => {
      this.applicantKey = undefined
      this.agentKey = undefined
      await this.getApplicantlist()
      await this.getAgentlist()
    })
  },
  methods: {
    // 状态转换显示
    typeLable (val) {
      for (const key in this.Tp_applicant) {
        if (this.Tp_applicant[key].value == val) {
          return this.Tp_applicant[key].name
        }
      }
      return val
    },
    agentTypeLable (val) {
      for (const key in this.Tp_agent) {
        if (this.Tp_agent[key].value == val) {
          return this.Tp_agent[key].name
        }
      }
      return val
    },
    cardTypeLable (val) {
      for (const key in this.Tp_card) {
        if (this.Tp_card[key].value == val) {
          return this.Tp_card[key].name
        }
      }
      return val
    },
    // 预览文件
    previewFile (record) {
      window.open(kkfilePreview(record.path))
    },
    download (record) {
      if (record && record.path) {
        downloadFileWithUrl(record.path, record.filename)
      }
    },
    // 查询委托代理人
    async getAgentlist () {
      const res = await getAgentWithGroup({ applyid: this.applyid })
      if (res.code == 0) {
        this.agentMap = res.data
        if (this.agentMap != null && this.agentMap != undefined && Object.keys(this.agentMap).length >= 0) {
          if (!this.agentKey) {
            for (const key in this.agentMap) {
              const numberKey = Number(key)
              if (this.agentMap[key]) {
                if (this.agentMap[numberKey][0] && !this.agentKey) {
                  this.agentKey = this.agentMap[numberKey][0].id
                  this.initAgentPerson(this.agentMap[numberKey][0], numberKey)
                }
                // for (let index = 0; index < this.agentMap[numberKey].length; index++) {
                //   this.agentKey = this.agentMap[numberKey][index].id
                //   this.initAgentPerson(this.agentMap[numberKey][index], numberKey)
                // }
              }
            }
          } else {
            for (const key in this.agentMap) {
              const numberKey = Number(key)
              if (this.agentMap[key]) {
                for (let index = 0; index < this.agentMap[numberKey].length; index++) {
                  if (this.agentKey == this.agentMap[numberKey][index].id) {
                    this.initAgentPerson(this.agentMap[numberKey][index], numberKey)
                  }
                }
              }
            }
          }
        } else {
          this.agentMap = {}
        }
      } else {
        this.agentMap = {}
      }
    },
    // 查询申请人
    async getApplicantlist () {
      const res = await getApplicantWithGroup({ applyid: this.applyid })
      if (res.code == 0) {
        this.applicationMap = res.data
        if (
          this.applicationMap != null &&
          this.applicationMap != undefined &&
          Object.keys(this.applicationMap).length >= 0
        ) {
          if (!this.applicantKey) {
            for (const key in this.applicationMap) {
              const numberKey = Number(key)
              if (this.applicationMap[numberKey]) {
                if (this.applicationMap[numberKey][0] && !this.applicantKey) {
                  this.applicantKey = this.applicationMap[numberKey][0].id
                  this.initApplicantPerson(this.applicationMap[numberKey][0], numberKey)
                }
                // for (let index = 0; index < this.applicationMap[numberKey].length; index++) {
                //   this.applicantKey = this.applicationMap[numberKey][index].id
                //   this.initApplicantPerson(this.applicationMap[numberKey][index], numberKey)
                // }
              }
            }
          } else {
            for (const key in this.applicationMap) {
              const numberKey = Number(key)
              if (this.applicationMap[numberKey]) {
                for (let index = 0; index < this.applicationMap[numberKey].length; index++) {
                  if (this.applicantKey == this.applicationMap[numberKey][index].id) {
                    this.initApplicantPerson(this.applicationMap[numberKey][index], numberKey)
                  }
                }
              }
            }
          }
        } else {
          this.applicationMap = {}
        }
      } else {
        this.applicationMap = {}
      }
    },

    // 新增委托代理人
    addAgent () {
      if (this.$refs.agentPersonAddViewRef) {
        this.$refs.agentPersonAddViewRef.init(false)
      }
    },
    initApplicantPerson (record, type) {
      this.applicantKey = record.id
      setTimeout(() => {
        if (this.$refs.applicantPersonAddViewRef) {
          this.$refs.applicantPersonAddViewRef.init(true, record, type)
        }
      }, 100)
    },

    editApplicantPerson (record, type) {
      this.applicantKey = record.id
      this.$nextTick(() => {
        if (this.$refs.applicantPersonAddViewRef) {
          this.$refs.applicantPersonAddViewRef.init(true, record, type)
        }
      })
    },
    initAgentPerson (record) {
      this.agentKey = record.id
      setTimeout(() => {
        if (this.$refs.agentPersonAddViewRef) {
          this.$refs.agentPersonAddViewRef.init(true, record)
        }
      }, 100)
    },
    editAgentPerson (record) {
      this.agentKey = record.id
      this.$nextTick(() => {
        if (this.$refs.agentPersonAddViewRef) {
          this.$refs.agentPersonAddViewRef.init(true, record)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.file-css {
  /* display: block; */
  display: flex;
  margin-bottom: 5px;
  word-break: break-all;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
}
::v-deep .ant-tabs-vertical.ant-tabs-card.ant-tabs-left .ant-tabs-card-bar.ant-tabs-left-bar .ant-tabs-tab-active {
  margin-left: 10px;
  margin-right: 0 !important;
  border-right: 1px solid #e8e8e8;
}
::v-deep .ant-tabs-nav-wrap {
  height: 36px !important;
}
.beyond_hiding {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.download_div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.link_css {
  display: block;
}

.add_btn {
  z-index: 20;
  margin-left: 90%;
}

.button_flex {
  display: flex;
  align-items: center;
}
::v-deep .ant-collapse {
  margin: 14px 0px;
}
::v-deep .ant-table-thead > tr > th {
  background: #f2f8fc;
}

.person_tab_div {
  height: 100%;
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 15%;
    width: 50px !important;
  }
  ::v-deep .ant-table-column-title {
    font-weight: bold;
  }
  ::v-deep .ant-tabs-nav .ant-tabs-tab {
    font-weight: bold;
  }
  ::v-deep .ant-collapse-header {
    font-size: 16px;
    font-weight: bold;
  }
}

.tag_div {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 16px;
}
.tag_content_select_div {
  background-color: rgb(0, 114, 198);
  font-size: 16px;
  min-width: 100px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  border-radius: 0px;
}
.tag_content_noselect_div {
  background-color: #f3f6fb !important;
  font-size: 16px;
  height: 32px;
  min-width: 100px;
  line-height: 24px;
  text-align: center;
  border-radius: 0px;
  color: black;
}
.person_matrial_label {
  display: flex;
  font-size: 16px;
  margin: 0px 10px;
}

</style>
